<template>
  <div ref="all" class="all">
    <div v-if="showSearch" ref="searchform" class="search-form">
      <!-- <div class="title" :class="isshow?'':'active'">
        <img src="@/assets/images/task-allocation.png" alt="">
        <span>{{ name }}</span><i class="el-icon-caret-bottom" @click="isshow=!isshow" />
        <i v-if="isshowref" class="el-icon-refresh refresh" @click="refresh" />
        <i v-else class="el-icon-close refresh" @click="$router.go(-1)" />
      </div> -->
      <transition name="fade">
        <slot v-if="isshow" name="searchform" />
      </transition>
    </div>
    <div class="search-form valueheight" :style="{height:isshowvalue?valueheight+'px':'42px'}">
      <!-- <div class="title" :class="isshowvalue?'':'active'">
        <img src="@/assets/images/log.png" alt="">
        <span>{{ name }}</span><i class="el-icon-caret-bottom" @click="isshowvalue=!isshowvalue" />
        <i v-if="isshowref" class="el-icon-refresh refresh" @click="refresh" />
      </div> -->
      <slot v-if="isshowvalue" name="valueform" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'ContentForm',
  props: {
    isshowref: {
      type: Boolean,
      default: true
    },
    // 列表名字
    name: {
      type: String,
      default() {
        return '列表'
      }
    },
    // 是否显示搜索栏
    showSearch: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      isshow: true, // 是否显示查询框
      isshowvalue: true, // 是否显示列表框
      valueheight: 0// 列表框高度
    }
  },
  computed: {
    needTagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    isshow() {
      var that = this
      // 因为加动画了所有用定时改变高度
      setTimeout(function() {
        that.valueheight = that.$refs.all.offsetHeight - (that.$refs.searchform ? that.$refs.searchform.offsetHeight : 0)
      }, 550)
    },
    needTagsView() {
      this.$nextTick(_ => {
        this.valueheight = this.$refs.all.offsetHeight - (this.$refs.searchform ? this.$refs.searchform.offsetHeight : 0)
      })
    }
  },
  mounted() {
    this.$nextTick(_ => {
      this.valueheight = this.$refs.all.offsetHeight - (this.$refs.searchform ? this.$refs.searchform.offsetHeight : 0)
    })
    window.onresize = _ => {
      this.$nextTick(_ => {
        this.valueheight = this.$refs.all.offsetHeight - (this.$refs.searchform ? this.$refs.searchform.offsetHeight : 0)
      })
    }
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    refresh() {
      this.$router.go(0)
    }
  }
}
</script>
<style lang="scss">
.all{
  height: 100%;
}
.search-form{
  border-bottom: none;
  position: relative;
  .title{
    font-family:"Microsoft YaHei";
    height: 42px;
    display: flex;
    font-size: 15px;
    align-items: center;
    background-image: linear-gradient(#F3F5FF, #DFE6FF);
    img{
      height: 12px;
      margin-left: 10px;
      margin-right: 9px;
    }
    span{
      margin-right: 9px;
    }
    .el-icon-caret-bottom{
      font-size: 18px;
    }
  }
  .el-icon-caret-bottom{
    animation:rotating2 .2s linear;
    transform-origin:center 55%;/*定义动画的旋转中心点*/
  }
  .active{
    .el-icon-caret-bottom{
        animation:rotating .2s linear;
        transform:rotate(180deg);
        transform-origin:center 55%;/*定义动画的旋转中心点*/
    }
  }
  @keyframes rotating{
    from{transform:rotate(0)}
    to{transform:rotate(180deg)}
  }
  @keyframes rotating2{
    from{transform:rotate(180deg)}
    to{transform:rotate(360deg)}
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.refresh{
  color: #006fc5;
  float: right;
  position: absolute;
  right: 20px;
  font-size: 18px;
}
.refresh:hover{
  cursor: pointer;
}
</style>
